<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.global.js"></script>
    <script src="./js/swiper-bundle.min.js"></script>
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/swiper-bundle.min.css">
    <style>
        .top .midImg {
            background: url("./img/1.png") no-repeat center;
        }
    </style>
</head>
<body>
<div id="app" >
    <div class="top">
        <div class="midImg">
        </div>
        <div class="back" @click="itemClick('index')">
        </div>
    </div>
    <div class="content">
        <div class="swiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(row,index) in list" :key="index">
                    <div class="left">
                        <div class="titleImg"></div>
                        {{row.title}}
                    </div>
                    <div class="right">
                        <template v-if="row.type === 'six'">
                            <div class="six" >
                                <div class="item" v-for="(item,index) in row.row" :key="index"
                                     :class="{merge: item.merge}">
                                    <div class="mergeList" v-if="item.merge">
                                        <div class="mergeImg"
                                             @click='previewClick(img)' :style="{backgroundImage:`url(${img})`}"
                                             v-for="(img,index) in item.image" :key="index">
                                        </div>
                                    </div>
                                    <div v-else class="sixImg" @click='previewClick(item.image)' :style="{backgroundImage:`url(${item.image})`}"></div>
                                    <div class="title">{{item.title}}</div>
                                </div>
                            </div>
                        </template>
                        <template v-if="row.type === 'one'">
                            <div class="one" v-for="(item,index) in row.row" :key="index">
                                    <div class="oneImg" @click='previewClick(item.image)' :style="{backgroundImage:`url(${item.image})`}">
                                        <img :src="item.image" :alt="item.title">
                                    </div>
                                    <div class="title">{{item.title}}</div>
                            </div>
                        </template>
                        <template v-if="row.type === 'tow'">
                            <div class="tow">
                                <div class="item" v-for="(item,index) in row.row" :key="index">
                                    <div class="oneImg" @click='previewClick(item.image)' :style="{backgroundImage:`url(${item.image})`}"></div>
                                    <div class="title">{{item.title}}</div>
                                </div>
                            </div>
                        </template>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="preview" v-if="showPreview">
        <div class="close-icon" @click="showPreview = false">
           X
        </div>
        <div class="preview-content">
            <img :src="url" alt="">
        </div>
    </div>
    <div class="foot"></div>
</div>
<script>
  const {createApp, ref} = Vue

  createApp({
    setup() {
      const list = [
        {
          type: 'six',
          title:'打击拒执犯罪',
          row: [
            {
              title: '2022年12月14日，鹿城区第十届人民代表大会常务委员会第六次会议上，区公安分局、区人民法院、区人民检察院主要负责人报告了打击“拒执犯罪”工作的成效，接受人大代表的监督',
              image: ['./img/1/11.jpg','./img/1/12.JPG'],
              merge:true
            },
            {
              title: '区人民法院院长刘万成作关于开展打击“拒执犯罪”联合协作整改落实情况的报告',
              image: './img/1/13.JPG'
            },
            {
              title: '区人民检察院检察长陈贤木作关于开展打击“拒执犯罪”联合协作整改落实情况的报告',
              image: './img/1/14.JPG'
            },
            {
              title: '区人大常委会副主任吴祝凡带队调研打击“拒执犯罪”工作开展情况',
              image: './img/1/15.jpg'
            },
            {
              title: '法院远程宣判',
              image: './img/1/16.jpg'
            },
          ]
        },
        // {
        //   type: 'one',
        //   title:'打击拒执犯罪',
        //   row: [
        //     {
        //       title: '2022年12月14日，鹿城区第十届人民代表大会常务委员会第六次会议上，区公安分局、区人民法院、区人民检察院主要负责人报告了打击“拒执犯罪”工作的成效，接受人大代表的监督',
        //       image: './img/1/16.jpg'
        //     },
        //   ]
        // },
        // {
        //   type: 'tow',
        //   title:'打击拒执犯罪',
        //   row: [
        //     {
        //       title: '2022年12月14日，鹿城区第十届人民代表大会常务委员会第六次会议上，区公安分局、区人民法院、区人民检察院主要负责人报告了打击“拒执犯罪”工作的成效，接受人大代表的监督',
        //       image: './img/1/16.jpg'
        //     },
        //     {
        //       title: '2022年12月14日，鹿城区第十届人民代表大会常务委员会第六次会议上，区公安分局、区人民法院、区人民检察院主要负责人报告了打击“拒执犯罪”工作的成效，接受人大代表的监督',
        //       image: './img/1/16.jpg'
        //     },
        //   ]
        // },
      ]
      const itemClick = (item) => {
        window.open(`./${item}.html`, '_self')
      }
      const url = ref('url')
      const showPreview = ref(false)
      const previewClick = (item) => {
        url.value =  item
        showPreview.value = true
      }
      return {
        list,
        itemClick,
        showPreview,
        url,
        previewClick,
      }
    }
  }).mount('#app')

  var mySwiper = new Swiper('.swiper', {
    loop: false, // 循环模式选项
    // autoplay: {
    //   delay: 5000,
    //   stopOnLastSlide: false,
    //   disableOnInteraction: false,
    // }
  })

</script>

</body>

</html>
